<template>
	<div class="wrapper">
		<section>
			<keep-alive>
				<!-- 设置挂载点 -->
				<router-view></router-view>
			</keep-alive>
		</section>
		<div class="container">
			<header>
				<div class="logo">网易云音乐</div>
				<div class="load-tip">
					<div class="text">下载APP</div>
				</div>
			</header>
			<div class="nav-list">
				<van-tabs v-model="activePath" title-active-color="#d43c33">
					<van-tab
						title="推荐音乐"
						to="/recommend-page"
						name="/recommend-page"
					></van-tab>
					<van-tab
						title="热歌榜"
						to="/hot-song"
						name="/hot-song"
					></van-tab>
					<van-tab
						title="搜索"
						to="/search-page"
						name="/search-page"
					></van-tab>
				</van-tabs>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			activePath: this.$route.path,
            // 搜索页面用路由的时候用
            // activePath: `/${ this.$router.path.split('/')[1]}`,
		};
	},
};
</script>

<style scoped>
.container {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}
header {
	width: 100%;
	height: 70px;
	background-color: #d43c33;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 12px;
	box-sizing: border-box;
	color: #fff;
}
header .text {
	color: #d43c33;
	width: 120px;
	height: 30px;
	background-color: #fff;
	line-height: 30px;
	text-align: center;
	border-radius: 15px;
	box-sizing: border-box;
}
.nav-list {
	color: #d43c33;
}
section {
	margin-top: 115px;
}
</style>